<template>
  <div class="mains">
    <div class="liveList">
      <headerBack>
        <b slot="my-center">直播</b>
      </headerBack>
      <scroller style="top: 0.8rem;" :on-refresh="refresh" :on-infinite="infinite" refresh-layer-color="@mainColor" loading-layer-color="@mainColor" ref="scrollerBottom" :noDataText="noDataText">
        <div style="width: 7.5rem;height: auto;background:#fff;padding-top:0.3rem;">
          <live-card :lives="liveList"></live-card>
          <div v-show="liveList.length == 0 && showBlank">
            <div class="noDataImage">
              <img src="~@/static/nothing/empty_meiyoushuju.png" alt />
              <div class="describe">抱歉，这个页面暂无数据～</div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import headerBack from '~/components/headerBack'
import { getLives } from '~/api/school'
import liveCard from '~/components/liveCard'
import ls from 'store2'
export default {
  components: {
    headerBack,
    liveCard
  },
  data() {
    return {
      showBlank: false,
      noDataText: '',
      currentPage: 1,
      pageCount: 0,
      liveList: []
    }
  },
  mounted: function() {
    this.$visit('NewsList')
    if (this.$route.query.type) {
      this.getWeekLives()
    } else {
      this.getLives()
    }
  },
  methods: {
    getWeekLives() {
      this.$loading('open')
      getLives(1, 1, 10)
        .then(res => {
          this.liveList = res.data
          this.totalPages = Math.ceil(res.meta.total / 10)
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    getLives() {
      this.$loading('open')
      getLives(2, 1, 10)
        .then(res => {
          this.liveList = res.data
          this.totalPages = Math.ceil(res.meta.total / 10)
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    infinite(done) {
      if (this.currentPage < this.totalPages) {
        this.currentPage = this.currentPage + 1
        let type = this.$route.query.type ? (type = 1) : (type = 2)
        getLives(type, this.currentPage, 10).then(res => {
          let newArr = res.data
          this.liveList = this.liveList.concat(newArr)
          this.totalPages = Math.ceil(res.meta.total / 10)
          done()
        })
      } else {
        done(true)
        return
      }
    },

    showTids(tids) {
      this.commonJs.gopush('infoDetail', tids)
    },
    refresh(done) {
      setTimeout(() => {
        done()
      }, 1500)
    }
  }
}
</script>

<style scoped lang="less">
.noDataImage {
  text-align: center;
  padding-top: 2.4rem;
  img {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.24rem;
  }
  .describe {
    color: #999;
    font-size: 0.28rem;
    line-height: 0.4rem;
  }
}
.liveList {
  width: 100%;
  min-height: 100vh;
  background: #fff;
  .infoBox {
    width: 100%;
    height: auto;
    padding: 0 0.3rem;
    .kuaixun {
      padding: 0.3rem 0;
      border-bottom: 0.01rem solid rgba(228, 232, 236, 1);
      b,
      i {
        display: block;
      }
      b {
        font-size: 0.3rem;
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        line-height: 0.4rem;
        box-sizing: border-box;
        width: 6.4rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }
      i {
        font-size: 0.26rem;
        font-weight: 400;
        color: rgba(158, 158, 158, 1);
        margin-top: 0.1rem;
      }
    }
  }
}
.my-center {
  font-weight: 600;
}
.mains {
  width: 100%;
  height: 100vh;
}
</style>
